import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
    Box,
    Flex,
    Avatar,
    HStack,
    Text,
    IconButton,
    Button,
    Menu,
    MenuButton,
    MenuList,
    MenuItem,
    MenuDivider,
    useDisclosure,
    useColorModeValue,
    Stack, useColorMode, Input, VStack,
} from '@chakra-ui/react'
import {Link as ReactLink, useNavigate} from 'react-router-dom'
import {HamburgerIcon, CloseIcon, MoonIcon, SunIcon} from '@chakra-ui/icons'
import React, {useEffect, useState} from 'react'
import {useAuth} from "../hooks/index.js";

const Links = ['About', 'Projects', 'Team']

const NavLink = (props) => {
    console.log(props)
    const {children} = props

    return (
        <Box
            as="a"
            px={2}
            py={1}
            rounded={'md'}
            _hover={{
                textDecoration: 'none',
                bg: useColorModeValue('gray.200', 'gray.700'),
            }}
            href={`/${children.toLowerCase()}`}>
            {children}
        </Box>
    )
}

export default function Navbar({children}) {
    const {handleLogout} = useAuth()
    const navigate = useNavigate();

    // 抽屉
    const {
        isOpen: isDrawerOpen,
        onOpen: onDrawerOpen,
        onClose: onDrawerClose
    } = useDisclosure()
    const btnRef = React.useRef()

    const {colorMode, toggleColorMode} = useColorMode()
    const {isOpen, onOpen, onClose} = useDisclosure()

    let adminMenu = [
        {route: 'doctor', name: '医生管理'},
        {route: 'student', name: '学生管理'},
        {route: 'medicine', name: '药品管理'},
        {route: 'order', name: '挂号管理'}
    ]
    let doctorMenu = [
        {route: 'doctor/manage/order', name: '叫号看病'},
    ]
    let studentMenu = [
        {route: 'student/show/doctor', name: '预约医生'},
        {route: 'student/take/medicine', name: '拿药'},
    ]
    const [curMenu, setCurMenu] = useState([]);


    const {authInfo: info} = useAuth()
    const [authInfo, setAuthInfo] = useState({})
    useEffect(() => {
        if (!localStorage.getItem('auth-info')) {
            localStorage.setItem('auth-info', JSON.stringify({}))
        }
        setAuthInfo({...JSON.parse(localStorage.getItem('auth-info'))})
        if (authInfo?.student) {
            setCurMenu(studentMenu)
            return
        }
        if (authInfo?.doctor) {
            setCurMenu(doctorMenu)
            return
        }
        setCurMenu(adminMenu)
    }, [info]);

    // useEffect(() => {
    // }, [localStorage.getItem('auth-info')]);

    return (
        <>
            <Box bg={useColorModeValue('blue.100', 'blue.900')} px={4}>
                {/*<Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>*/}
                <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
                    <IconButton
                        size={'md'}
                        icon={isOpen ? <CloseIcon/> : <HamburgerIcon/>}
                        aria-label={'Open Menu'}
                        display={{md: 'none'}}
                        onClick={isOpen ? onClose : onOpen}
                    />
                    <HStack spacing={8} alignItems={'center'}>
                        <Box>
                            <ReactLink to={'/'}>
                                Malred
                            </ReactLink>
                        </Box>
                        <HStack as={'nav'} spacing={4} display={{base: 'none', md: 'flex'}}>
                            {Links.map((link) => (
                                <NavLink key={link}>{link}</NavLink>
                            ))}
                        </HStack>
                    </HStack>
                    <Flex alignItems={'center'}>
                        <Stack direction={'row'} spacing={7}>
                            <Button onClick={toggleColorMode}>
                                {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}
                            </Button>

                            <Button ref={btnRef} colorScheme='blue' onClick={onDrawerOpen}>
                                菜单
                            </Button>

                            <Menu>
                                <MenuButton
                                    as={Button}
                                    rounded={'full'}
                                    variant={'link'}
                                    cursor={'pointer'}
                                    minW={0}>
                                    <Avatar
                                        size={'sm'}
                                        src={
                                            'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
                                        }
                                    />
                                </MenuButton>
                                <MenuList>
                                    <MenuItem>Link 1</MenuItem>
                                    <MenuItem>Link 2</MenuItem>
                                    <MenuDivider/>
                                    <MenuItem
                                        onClick={() => {
                                            handleLogout()
                                            navigate('/login')
                                        }}
                                    >退出登录</MenuItem>
                                </MenuList>
                            </Menu>
                        </Stack>
                    </Flex>
                </Flex>

                {isOpen ? (
                    <Box pb={4} display={{md: 'none'}}>
                        <Stack as={'nav'} spacing={4}>
                            {Links.map((link) => (
                                <NavLink key={link}>{link}</NavLink>
                            ))}
                        </Stack>
                    </Box>
                ) : null}
            </Box>

            <Box p={4}>
                {children}
                {/*判断学生还是医生, 菜单不同*/}
                <Drawer
                    isOpen={isDrawerOpen}
                    placement='left'
                    onClose={onDrawerClose}
                >
                    <DrawerOverlay/>
                    <DrawerContent>
                        <DrawerCloseButton/>
                        <DrawerHeader className={'text-center'} borderBottomWidth='1px'>管理菜单</DrawerHeader>

                        <DrawerBody>
                            <VStack as={'nav'} spacing={4} display={{base: 'none', md: 'flex'}}>
                                {
                                    curMenu.map((item) => (
                                        <Box
                                            key={item.route}
                                            as="span"
                                            px={2}
                                            py={1}
                                            rounded={'md'}
                                            _hover={{
                                                textDecoration: 'none',
                                                bg: useColorModeValue('gray.200', 'gray.700'),
                                            }}>
                                            <ReactLink to={item.route}>{item.name}</ReactLink>
                                        </Box>

                                    ))}
                            </VStack>
                        </DrawerBody>

                        <DrawerFooter>
                            <Button variant='outline' mr={3} onClick={onDrawerClose}>
                                Cancel
                            </Button>
                            {/*<Button colorScheme='blue'>Save</Button>*/}
                        </DrawerFooter>
                    </DrawerContent>
                </Drawer>
            </Box>
        </>
    )
}